<template>
  <QupFormContainer :column="3">
    <el-form ref="form" :model="formData" :rules="formRules" label-width="130px">
      <el-form-item prop="customerCode" label="客户">
        <c-common-search-customer
          v-model="formData.customerCode"
          :label.sync="formData.customerName"
          :business-type-name_res.sync="formData.businessTypeName"
          :business-type-code_res.sync="formData.businessTypeCode"
          :contact-phone_res.sync="formData.contactPhone"
          :is-elec-businiess_res.sync="formData.isElecBusiniess"
          :operate-area_res.sync="formData.operateArea"
          :agency-name_res.sync="formData.officeName"
          :agency-code_res.sync="formData.officeCode"
          :office-type-name_res.sync="formData.officeTypeName"
          :office-type-code_res.sync="formData.officeTypeCode"
          :person-name_res.sync="formData.personName"
          :person-code_res.sync="formData.personCode"
          :cooperate-start_res.sync="formData.cooperateStart"
          :city-level-name_res.sync="formData.cityLevelName"
          :before-params="beforeParams"
          :disabled="disabled"
          @input="handleCustomerChange"
        />
      </el-form-item>
      <el-form-item prop="customerName" label="客户编码">
        <span>{{ formData.customerCode }}</span>
      </el-form-item>
      <el-form-item prop="businessTypeName" label="客户经营类型">
        <span>{{ formData.businessTypeName }}</span>
      </el-form-item>
      <el-form-item prop="contactPhone" label="经销商联系电话">
        <span>{{ formData.contactPhone }}</span>
      </el-form-item>
      <el-form-item prop="isElecBusiniess" label="是否有电商配送权限">
        <c-dict-range-view :value="formData.isElecBusiniess" dict-type-code="BOOLEANS" domain-code="marketing" app-code="slm" />
      </el-form-item>
      <el-form-item prop="operateArea" label="客户经营总面积">
        <span>{{ formData.operateArea || 0 }}㎡</span>
      </el-form-item>
      <el-form-item v-if="showColumn.includes('cityLevelName')" prop="cityLevelName" label="城市级别">
        <span>{{ formData.cityLevelName }}</span>
      </el-form-item>
      <el-form-item v-if="showColumn.includes('cooperateStart')" prop="cooperateStart" label="合作开始日期">
        <span>{{ $trimHMS(formData.cooperateStart) }}</span>
      </el-form-item>
      <el-form-item prop="officeName" label="所属办事处">
        <span>{{ formData.officeName }}</span>
      </el-form-item>
      <el-form-item prop="officeTypeName" label="办事处类型">
        <c-dict-range-view :value="formData.officeTypeName" dict-type-code="mdm-QY028" domain-code="marketing" app-code="slm" />
      </el-form-item>
      <el-form-item prop="personName" label="办事处负责人">
        <span>{{ formData.personName }}</span>
      </el-form-item>
      <el-form-item prop="isOtherReceiveManagerKnow" label="是否需要其他业务客户经理接收知晓" label-width="220px">
        <el-switch v-model="formData.isOtherReceiveManagerKnow" :active-value="1" :inactive-value="0" @change="handleChange" />
      </el-form-item>
      <el-form-item v-show="showReceiveManager" prop="receiveManagerCode" label="接收客户经理">
        <c-common-search-person
          ref="cCommonSearchPerson"
          v-model="formData.receiveManagerCode"
          :label.sync="formData.receiveManagerName"
          :person-tel_res.sync="formData.receiveManagerTel"
          :type_res.sync="formData.receiveManagerTypeCode"
          by-customer
          :query-customer-code="formData.customerCode"
          :depend-on-observe="formData.customerCode"
          :disabled="!formData.customerCode"
          :start-observe="startObserve"
          @update:type_res="v=>{
            if(v===''){
              $set(formData, 'receiveManagerTypeName', '')
              return
            }
            v = v.split(',').map(e=>{
              return [2,'2'].includes(e)?'定制':[1,'1'].includes(e)?'成品':''
            })
            $set(formData, 'receiveManagerTypeName', v.filter(e=>!!e).join(','))
          }"
        />
      </el-form-item>
      <template v-if="showReceiveManager">
        <el-form-item prop="receiveManagerName" label="接收客户经理编码">
          <span>{{ formData.receiveManagerCode }}</span>
        </el-form-item>
        <el-form-item prop="receiveManagerTypeName" label="接收客户经理类型">
          <span>{{ formData.receiveManagerTypeName }}</span>
        </el-form-item>
        <el-form-item prop="receiveManagerTel" label="接收客户经理电话">
          <span>{{ formData.receiveManagerTel }}</span>
        </el-form-item>
      </template>
      <el-form-item prop="submitAnOpinion" label="提报意见" :span="24">
        <el-input v-model="formData.submitAnOpinion" type="textarea" show-word-limit maxlength="512" :autosize="{minRows: 3}" placeholder="提报意见" clearable />
      </el-form-item>
    </el-form>
  </QupFormContainer>
</template>
<script>
export default {
  name: 'CustomerBaseInfo',
  props: {
    detail: {
      type: Object,
      default: undefined
    },
    beforeParams: {
      type: Function,
      default: function(paramsJson) {
        this.$codeOrName(paramsJson.filtersRaw, 'code', 'name')
        return paramsJson
      }
    },
    showColumn: {
      type: [String, Array],
      default: ''
    },
    startObserve: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        // 基本信息
        customerCode: '',
        customerName: '',
        businessTypeName: '',
        businessTypeCode: '',
        contactPhone: '',
        isElecBusiniess: '',
        operateArea: '',
        officeName: '',
        officeCode: '',
        officeTypeName: '',
        officeTypeCode: '',
        personName: '',
        personCode: '',
        isOtherReceiveManagerKnow: 0,
        receiveManagerCode: '',
        receiveManagerName: '',
        receiveManagerTel: '',
        receiveManagerTypeCode: '',
        receiveManagerTypeName: '',
        submitAnOpinion: '', // 提报意见
        cityLevelName: '',
        cooperateStart: ''
      }
    }
  },
  computed: {
    formRules() {
      return {
        customerCode: [{ required: true, message: '请选择客户', trigger: 'change' }],
        isOtherReceiveManagerKnow: [{ required: true, message: '请选择是否需要其他业务客户经理接收知晓', trigger: 'change' }],
        receiveManagerCode: [{ required: [1, '1'].includes(this.formData.isOtherReceiveManagerKnow), message: '请选择接收客户经理', trigger: 'change' }]
      }
    },
    showReceiveManager() {
      return [1, '1'].includes(this.formData.isOtherReceiveManagerKnow)
    }
  },
  watch: {
    detail: {
      handler(v) {
        this.initFormData()
      },
      immediate: true
    },
    formData: {
      handler(v) {
        this.$emit('input', JSON.parse(JSON.stringify(v)))
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    initFormData() {
      if (this.detail === undefined) return
      for (const [k, v] of Object.entries(this.formData)) {
        this.$set(this.formData, k, this.detail[k] === undefined ? v : this.detail[k])
      }
      this.$emit('input', this.formData)
    },
    validate() {
      return this.$refs.form.validate()
    },
    handleCustomerChange(customerCode) {
      this.$emit('change', customerCode)
    },
    handleChange(v) {
      if (![1, '1'].includes(v)) {
        this.$refs.cCommonSearchPerson.handleInput('')
      }
    }
  }
}
</script>
